<template>
    <section class="chart-container">
        <el-row>
            <el-col :span="24">
                <div id="chartColumn" style="width:100%; height:400px;"></div>
            </el-col>
        </el-row>
    </section>
</template>

<script>
    import echarts from 'echarts'

    export default {
        data() {
            return {
                chartColumn: null,
                orderDetail: [],
            }
        },

        methods: {
            drawColumnChart() {
                this.chartColumn = echarts.init(document.getElementById('chartColumn'));
                this.chartColumn.setOption({
                  title: { text: '订单数据' },
                  tooltip: {},
                  xAxis: {
                      data: ['充值订单', '商品订单', '收购订单', '服务订单', '领养订单']
                  },
                  yAxis: {},
                  series: [{
                      name: '销量',
                      type: 'bar',
                      data: this.orderDetail
                    }]
                });
            },
            drawCharts() {
                this.drawColumnChart()
            },
            getOrderDetail(){
                this.$http.get("/orderCount")
                    .then(result => {
                        this.chartColumn.setOption({
                          series: [{
                            data: result.data.resultObj
                          }]
                        })
                    })
            }
        },

        mounted: function () {
            this.drawCharts()
            this.getOrderDetail();
        },
        updated: function () {
            this.drawCharts()
        }
    }
</script>

<style scoped>
    .chart-container {
        width: 100%;
        float: left;
    }
    /*.chart div {
        height: 400px;
        float: left;
    }*/

    .el-col {
        padding: 30px 20px;
    }
</style>
